<template>
  <div class="addressAddBox">
    <v-header-title :title="title">
      <mt-button slot="right-content" @click="submitForm">保存</mt-button>
    </v-header-title>
    <div class="addressAdd">
      <div class="user-info-wrapper">
        <div class="user-info-title">联系人</div>
        <div class="user-info">
          <mt-field label="姓名" placeholder="请输入用户名" class="username" v-model="form.username"></mt-field>
          <div class="sex">
            <div class="man-box" @click="form.sex='MALE'"><span class="icon-man" :class="{selected:form.sex=='MALE'}"></span>
              <P>先生</P></div>
            <div class="woman-box" @click="form.sex='FEMALE'"><span class="icon-woman" :class="{selected:form.sex=='FEMALE'}"></span>
              <P>女士</P></div>
          </div>
          <mt-field label="手机" placeholder="请输入收获手机号" type="tel" class="phone" v-model="form.mobile"></mt-field>
        </div>
      </div>
      <div class="address-info-wrapper">
        <div class="address-info-title">收货地址</div>
        <div class="address-info">
          <mt-cell title="小区/大厦/学校">
            <span class="icon-gps" @click="showMap"></span>
            <p @click="showMap">{{form.address ? form.address : '点击选择'}}</p>
          </mt-cell>
          <mt-field label="楼号/门牌号" placeholder="例：6号楼601" v-model="form.detail"></mt-field>
          <mt-cell title="设为默认地址">
            <mt-switch v-model="isDefault"></mt-switch>
          </mt-cell>
        </div>
      </div>
    </div>
    <div id="address" v-show="showMapDiv">
      <div class="address-header">
        地址选择
        <mt-button size="small" type="default" style="float: left;margin-top:5px;" @click="showMapDiv=false">取消</mt-button>
      </div>
      <amap-address @clickAddress="clickAddress" :reduce="50"></amap-address>
    </div>
  </div>
</template>

<script>
  import headerWithTitle from 'components/header/HeaderWithTitle';
  import { Toast, MessageBox, Switch } from 'mint-ui';
  import {createUserShippingAddress} from 'components/api/interface-hhy';
  export default {
    data() {
      return {
        title: '添加收货地址',
        showMapDiv: false,
        isDefault: false,
        form: {
          uid: 0,
          user_id: 0,
          username: '',
          sex: 'MALE',
          mobile: '',
          address: '',
          detail: '',
          longitude: '',
          latitude: '',
          is_default: ''
        }
      };
    },
    components: {
      'v-header-title': headerWithTitle
    },
    methods: {
      showMap() {
        this.showMapDiv = true;
      },
      clickAddress(result) {
        this.form.address = result.name;
        this.form.detail = result.address;
        this.form.longitude = result.location ? result.location.split(',')[0] : ''
        this.form.latitude = result.location ? result.location.split(',')[1] : ''
        this.showMapDiv = false;
      },
      submitForm() {
        if (this.form.username === '') {
          Toast('请填写姓名')
          return false;
        }
        if (this.form.mobile === '') {
          Toast('请填写手机号')
          return false;
        }
        if (!(/^1[34578]\d{9}$/.test(this.form.mobile))) {
          Toast('请填写正确的手机号')
          return false;
        }
        if (this.form.address === '') {
          Toast('请选择地址')
          return false;
        }
        if (this.form.detail === '') {
          Toast('请填写楼号/门票号')
          return false;
        }
        // 是否默认
        this.form.is_default = this.isDefault ? 'YES' : 'NO';
        // 提交数据
        createUserShippingAddress(this.form).then(res => {
          MessageBox.alert('操作成功').then(action => {
            this.$router.push('/address')
          });
        }).catch(err => {
          MessageBox.alert(err.response.data[0]['message']);
        });
      }
    }
  }

</script>

<style lang="stylus">
  @import '../../common/stylus/mixin';
  #address{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    line-height:1.31944rem;
    font-size:0.5rem;
    text-align:center;
    background:#fff;
  }
    .address-header{
      background:#fff;padding:0 10px;
    }
  .addressAdd {

    .user-info-wrapper {
      border-1px: (rgb(216, 216, 216));
      .user-info-title {
        height: 0.69444rem;
        padding-left: 0.38889rem;
        line-height: 0.69444rem;
        font-size: 0.36111rem;
        border-1px: (rgb(216, 216, 216));
      }
      .user-info {
        background: #fff;
        .mint-field {
          height: 1.38889rem;
          .mint-cell-wrapper {
            padding: 0;
            margin-left: 0.38889rem;
            border-1px: (rgb(216, 216, 216));
            .mint-cell-title {
              width: auto;
              margin-right: 0.41667rem;
              font-size: 0.38889rem;
              color: #333;
            }
            .mint-cell-value {
              font-size: 0.38889rem;
              color: #b8b8b8;
            }
          }
        }
        .sex {
          height: 1.38889rem;
          margin-left: 0.38889rem;
          border-1px: (rgb(216, 216, 216));
          .man-box {
            display: inline-block;
            margin-left: 1rem;
            vertical-align: middle;
            .icon-man {
              display: inline-block;
              width: 0.5rem;
              height: 0.5rem;
              bg-image('notselected');
              background-size: 100% 100%;
            }
            .selected{
              bg-image('selected');
            }
            p {
              display: inline-block;
              margin-left: 0.19444rem;
              font-size: 0.38889rem;
              vertical-align: middle;
            }
          }
          .woman-box {
            display: inline-block;
            margin-left: 1.75rem;
            vertical-align: middle;
            .icon-woman {
              display: inline-block;
              width: 0.5rem;
              height: 0.5rem;
              bg-image('notselected');
              background-size: 100% 100%;
            }
            .selected{
              bg-image('selected');
            }
            p {
              display: inline-block;
              font-size: 0.38889rem;
              margin-left: 0.19444rem;
              vertical-align: middle;
            }
          }

        }
        .phone {
          height: 1.38889rem;
        }
      }
    }
    .address-info-wrapper {
      border-1px: (rgb(216, 216, 216));
      .address-info-title {
        height: 0.69444rem;
        padding-left: 0.38889rem;
        line-height: 0.69444rem;
        font-size: 0.36111rem;
        border-1px: (rgb(216, 216, 216));
      }
      .address-info {
        background: #fff;
        .mint-cell {
          height: 1.38889rem;
          .mint-cell-wrapper {
            padding: 0;
            margin-left: 0.38889rem;
            border-1px: (rgb(216, 216, 216));
            .mint-cell-title {
              flex: none;
              width: auto;
              margin-right: 0.41667rem;
              font-size: 0.38889rem;
              color: #333;
            }
            .mint-cell-value {
              font-size: 0.38889rem;
              color: #b8b8b8;
              .icon-gps {
                width: 0.5rem;
                height: 0.5rem;
                bg-image('gps');
                background-size: 100% 100%;
              }
            }
          }
          .mint-cell-allow-right::after {
            width: 0.33333rem;
            height: 0.33333rem;
            right: 0.5rem;
          }
        }
        .mint-field {
          height: 1.38889rem;
          .mint-cell-wrapper {
            height: 1.38889rem;
            padding: 0;
            margin-left: 0.38889rem;
            border-1px: (rgb(216, 216, 216));
            .mint-cell-title {
              flex: none;
              width: auto;
              margin-right: 0.41667rem;
              font-size: 0.38889rem;
              color: #333;
            }
            .mint-cell-value {
              font-size: 0.38889rem;
              color: #b8b8b8;
            }
          }
        }
      }
    }
  }
</style>
